<template>
  <div class="page-outer">
    <div style="height: 71px; background-color: #fff; padding: 0 16px">
      <div class="title-text">
        <span>土桥xxxxxxxxxxxxxxxxxxxx项目</span>
      </div>
      <div>
        <span class="type-text type-text-1">
          <span>住宅用地</span>
        </span>
        <span class="type-text type-text-2">
          <span>设计阶段</span>
        </span>
      </div>
    </div>
    {{ dataObj }}

    <div style="padding: 8px; height: calc(100% - 89px); overflow-y: auto; overflow-x: hidden">
      <div style="background-color: #fff; padding: 12px; margin-bottom: 8px">
        <!-- form -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="6">
              <el-form-item label="项目编号">
                <span>{{ dataObj.newcode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地块编号">
                <span>{{ dataObj.landSn }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="受让单位">
                <span>招商房地产开发有限公司</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="成交楼面价">
                <span>24670元/㎡</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="成交楼面价">
                <span>24670元/㎡</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规划建筑面积">
                <span>219497㎡</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="成交时间">
                <span>2023-09-27</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div style="background-color: #fff; padding: 12px; margin-bottom: 8px">
        <!-- tabs -->
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="基本信息"></el-tab-pane>
          <el-tab-pane label="产品总览" name="产品总览"></el-tab-pane>
          <el-tab-pane label="精装部品" name="精装部品"></el-tab-pane>
          <el-tab-pane label="户型图" name="户型图"></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 基本信息 -->
      <TitleBar>基本信息</TitleBar>
      <div style="background-color: #fff; padding: 12px; margin-bottom: 8px">
        <!-- form -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="8">
              <el-form-item label="城市">
                <span> {{ landObj.cityName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区县板块">
                <span>{{ landObj.districtName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="环线">
                <span>五环至六环</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="楼盘地址">
                <span> {{ dataObj.houseAddress }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物业类型">
                <span>{{ dataObj.houseType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物业类型明细">
                <span>{{ dataObj.detailHouseType }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 产品总览 -->
      <TitleBar>产品总览</TitleBar>
      <div style="background-color: #fff; padding: 12px; margin-bottom: 8px">
        <!-- form -->
        <div style="display: flex">
          <div style="padding: 20px; border-right: #e1e1e1 1px solid">
            <div>34704.36㎡</div>
            <div>建筑面积</div>
          </div>
          <div style="padding: 20px; border-right: #e1e1e1 1px solid">
            <div>12</div>
            <div>楼栋数</div>
          </div>
        </div>
      </div>

      <!-- 精装部品 -->
      <TitleBar>精装部品</TitleBar>
      <div style="background-color: #fff; padding: 12px; margin-bottom: 8px"></div>
    </div>

    <!-- bbb -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { reactive } from 'vue';
import TitleBar from '@/components/TitleBar.vue';
import axios from 'axios';

const activeName = ref('first');

const formInline = reactive({
  user: '',
  region: '',
  date: '',
});

const dataObj = ref({
  instalmentId: null,
});

const landObj = ref({
  id: '1909856129920815107',
  landId: '2de7176f-0155-495f-8b0f-c2463c0a643f',
  landName:
    '北京市丰台区地铁九号线郭公庄车辆段项目(三期)1518-621、629、627地块R2二类居住用地、B4综合性商业金融服务业用地、A334托幼用地',
  landSn: '京土储挂(丰)[2023]054号',
  cityName: '北京市',
  cityCode: '110100',
  districtName: '丰台区',
  districtCode: '110106',
  landNature: '综合用地(含住宅)',
  dealStatus: '已成交',
  createTime: 1744180159000,
});

function queryLand(params) {
  let url = '/admin-api/ifs/data-land/page';
  // url += '?instalmentId=' + 'EBF7C368-3315-4B0B-A05E-29E01A01AC50';
  url += '?landId=' + params;
  const config = {
    headers: {
      authorization: 'Bearer ' + params,
    },
  };
  axios.get(url, config).then(res => {
    if (res.status == 200 && res.data.data && res.data.data.list.length > 0) {
      const tmpObj = res.data.data.list[0];
      // const bbb = dataObj.value;
      // debugger;
      Object.assign(landObj.value, tmpObj);
      // dataObj.value = tmpObj;
    }
  });
}

function queryData(params) {
  let url = '/admin-api/rdtalk/house-getnewhousebase/page';
  // url += '?instalmentId=' + 'EBF7C368-3315-4B0B-A05E-29E01A01AC50';
  url += '?instalmentId=' + '48595A68-F989-4594-A963-B1B24042C47D';
  const config = {
    headers: {
      authorization: 'Bearer ' + params,
    },
  };
  axios.get(url, config).then(res => {
    if (res.status == 200 && res.data.data && res.data.data.list.length > 0) {
      const tmpObj = res.data.data.list[0];
      // const bbb = dataObj.value;
      // debugger;
      Object.assign(dataObj.value, tmpObj);
      // dataObj.value = tmpObj;

      queryLand(dataObj.landId);
    }
  });
}

onMounted(() => {
  const token = localStorage.getItem('my_token');
  if (token) {
    queryData(token);
  }
});
</script>

<style scoped>
.page-outer {
  background-color: rgba(242, 242, 242, 1);
  width: 100%;
}

.title-text {
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  padding: 12px 0 0;
}

.type-text {
  font-size: 10px;
  padding: 4px 12px;
  margin-right: 4px;
}

.type-text-1 {
  color: #507df3;
  background-color: rgb(80, 125, 243, 0.3);
}
.type-text-2 {
  color: #f59a23;
  background-color: rgba(245, 154, 35, 0.3);
}
</style>

